<template>
    <div class="app-main">
        <p class="activeImg">
            <img src="../../../assets/image/inviteFriends/banner.png" />
        </p>
        <div class="inviteDetail-dialog">
            <!--没有接受邀请好友或者为新用户-->
            <h1 class="title false" v-if="userFlag==0">已成功邀请<span>0</span>位好友消费</h1>

            <!--有接受邀请好友-->
            <h1 class="title true" v-else>已成功邀请<span>{{cnt}}</span>位好友消费</h1>

            <h3>近期邀请记录</h3>

            <!--没有接受邀请好友或者为新用户-->
            <div class="content listEmpty" v-if="userFlag==0 || result==0"></div>

            <!--有接受邀请好友-->
            <div class="content" v-else>
                <p class="th"><span>好友</span><span>状态</span><span>您已获得</span></p>
                <div id="rankList" class="rankList">
                    <ul id="guideList">
                        <li v-for="guideList in guideLists">
                            <p v-if="guideList.coupon_flag == 0 || guideList.coupon_flag == 1" class="">
                                <span>{{guideList.mobile}}</span><span>已注册</span><span>-</span>
                            </p>
                            <p v-if="guideList.coupon_flag ==2" class="inviteTrue">
                                <span>{{guideList.mobile}}</span><span>已消费</span><span>{{guideList.old_user_couponname}}</span>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="activeContent">
                <p></p>
            </div>
        </div>
    </div>
</template>
<style lang="scss">
    @import '../../../assets/css/common.scss';

    .bottomfix {
        position: fixed;
        bottom: 0;
        width: 100%;
        max-width: 750px;
        z-index: 333;
    }

    /*大图提前加载*/
    body:after {
        content: url("../../../assets/image/inviteFriends/loading.gif");
        display: none;
    }

    /*活动*/

    body {
        background-color: #fff;
    }

    .app-main {
        position: relative;
        height: auto;
    }

    .app-main img{
        width: 100%;
    }

    .app-main .inviteDetail-dialog {
        padding: 0 0 2rem 0;
        /*background-color: transparent;
        border-radius: .2rem;
        box-shadow: 0 .35rem .5rem 0 rgba(0, 0, 0, .2);*/
        width: 84%;
        position: absolute;
        left: 8%;
        top: 2rem;
    }

    .app-main .inviteDetail-dialog h1 {
        font-size: 1rem;
        text-align: center;
        color: #fff;
    }

    .app-main .inviteDetail-dialog h1 span {
        padding: 0 .3rem;
        font-size: 1.5rem;
        color: #d0021b;
        display: inline-block;
    }

    .app-main .inviteDetail-dialog h3 {
        padding: .5rem 0 1rem 0;
        font-size: .75rem;
        text-align: center;
        color: #fff;
    }

    .app-main .inviteDetail-dialog .listEmpty {
        background: url("../../../assets/image/inviteFriends/icon-listEmpty.png") center 30% no-repeat;
        background-size: 25%;
        position: relative;
    }

    .app-main .inviteDetail-dialog .listEmpty:after {
        content: "还没有邀请到好友";
        text-align: center;
        font-size: 1rem;
        color: #8392a0;
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
    }

    .app-main .inviteDetail-dialog .content {
        /*padding-top: 1rem;*/
        padding: 1rem 1rem;
        background-color: #fff;
        border-radius: .25rem;
        box-shadow: 0 .35rem .5rem 0 rgba(0, 0, 0, .2);
        font-size: .8rem;
        color: #8392a0;
        text-align: center;
        height: 21rem;
        /*line-height: 1.7;*/
    }

    .app-main .inviteDetail-dialog .content .th {
        padding-bottom: .5rem;
        font-size: .65rem;
        font-weight: bold;
        /*display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-around;
        justify-content: space-around;*/
    }

    .app-main .inviteDetail-dialog .content .th:after,
    .app-main .inviteDetail-dialog .content .th:before {
      content: '';
      display: table;
      clear: both;
    }

    .app-main .inviteDetail-dialog .content .rankList {
        height: 17.5rem;
        overflow: hidden;
    }

    .app-main .inviteDetail-dialog .content .rankList li {
        height: 1.75rem;
        line-height: 1.75rem;
        font-size: .65rem;
    }

    .app-main .inviteDetail-dialog .content .rankList li > p {
        /*display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-around;
        justify-content: space-around;*/
    }

    .app-main .inviteDetail-dialog .content .rankList li > p:after,
    .app-main .inviteDetail-dialog .content .rankList li > p:before {
      content: '';
      display: table;
      clear: both;
    }

    .app-main .inviteDetail-dialog .content .rankList li > p.inviteTrue {
        color: #7ed321;
    }

    .app-main .inviteDetail-dialog .content .th > span,
    .app-main .inviteDetail-dialog .content .rankList li > p > span {
        float: left;
    }

    .app-main .inviteDetail-dialog .content .th > span:nth-of-type(1),
    .app-main .inviteDetail-dialog .content .rankList li > p > span:nth-of-type(1) {
        width: 40%;
    }

    .app-main .inviteDetail-dialog .content .th > span:nth-of-type(2),
    .app-main .inviteDetail-dialog .content .rankList li > p > span:nth-of-type(2) {
        width: 20%
    }

    .app-main .inviteDetail-dialog .content .th > span:nth-of-type(3),
    .app-main .inviteDetail-dialog .content .rankList li > p > span:nth-of-type(3) {
        width: 39%;
    }

    .app-main .inviteDetail-dialog .activeContent {
        padding: 1.5rem 0 1rem 0;
        font-size: .7rem;
        color: #8392a0;
        text-align: center;
        line-height: 1.5;
    }
</style>
<script>
    import common from "../../../assets/js/common.js";
    export default {
        data: function () {
            return {
                userFlag: '',  //老用户标识1老用户,0新用户
                result: '',
                cnt: '',
                guideLists: []
            };
        },
        mounted: function () {
            this.setUserFlag();
            this.getUid();
            //打点
            common.ANA_AnalyticsScan();
        },
        methods: {
            setUserFlag: function () {  //获取新老用户标识
                var userFlag = window.location.search;
                this.userFlag = userFlag.replace(/^\?userFlag=/g, '');

            },
            getUid: function () {  //获取用户UID
                var _this = this,
                    lbUID=window.sessionStorage.getItem('lbUID');
                /*lb.getUserInfo(function (data) {
                    var uid;
                    uid = data.text.UID;
                    _this.getGuide(uid);
                });*/
                this.getGuide(lbUID);
                //this.getGuide('6+ZL8YMOYLF2PP1ZICMe7g==');
            },
            getGuide: function (uid) {  //获取用户邀请记录
                // GET /someUrl
                var _uid = uid;
                if (this.userFlag == 1) {
                    this.$http.post(common.isdev() + '/guide/getGuidePage/0.htm', {'cxid':_uid}).then(function (response) {
                        // get body data
                        var someData = response.data;
                        var guideList = someData.obj.guideList;
                        //var guideList = this.guideLists;
                        this.result = someData.result;
                        if (someData.result == 1) {
                            if(guideList.length > 0) {
                                this.cnt = someData.obj.cnt;
                                //var _temp1 = '';
                                for (var i = 0, _length = guideList.length; i < _length; i++) {
                                    /*_temp1 = guideList[i].mobile.slice(4, 8); //手机号中第4位到第7位的值
                                    guideList[i].mobile = guideList[i].mobile.replace(_temp1, '****');
                                    _temp1 = '';*/
                                    guideList[i].mobile = guideList[i].mobile.replace(/(^\d{3})(\d{4})(\d{4})/,function(match,p1,p2,p3,offset,string){
                                      return p1+ "****" + p3;
                                    });
                                }
                                this.guideLists = guideList;
                            } else {
                                this.result = 0;
                                this.cnt = 0;
                            }
                        } else {
                            this.cnt = 0;
                        }
                    }, function (response) {
                        // error callback
                    });
                }
            }
        }
    }
</script>